import React from 'react'
import {connect} from 'react-redux'
import {incrementActionCreator} from '../store/actions/counterAction'
function Counter(props) {
  console.log('props',props);
  const add=(n)=>{
    props.dispatch(incrementActionCreator(n))
  }
  return (
    <div>
        <h1>react-redux版的计数器</h1>
        <div>{props.count}</div>
        <button onClick={()=>{add(1)}}>+</button>
    </div>
  )
}
/*
    connect是用来将普通组件封装成高阶组件的一个方法
    该方法能然普通组件的porps属性绑定react-redux仓库中dispatch方法和state属性
    第2个括号中参数就是要封装的普通组件的名称
    第1个括号中的参数可以一个回调函数，该回调函数的作用就是将仓库中state映射到该组件的props
*/
const mapStateToProps=(state)=>{
   //return的作用就是将mapStateToProps函数中接收到的state参数返回给该组件的props上
   return{
     count:state.num
   }
}
export default connect(mapStateToProps)(Counter)


